<template lang="html">
    <div class="live-gift-page normal-table-page">
        <Row :gutter="10">
            <Col span="18">
                <Card :dis-hover="true">
                    <p slot="title">
                        <Icon type="person-add"></Icon> 主播管理
                    </p>
                    <div slot="extra">

                        <!-- <Input v-model="searchKey" class="search-input" icon="search" placeholder="标题、摘要或作者" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                        <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button> -->

                        <Button type="ghost" class="add-new-btn" icon="plus" @click="openAddModal()">新增</Button>
                    </div>
                    <Table :columns="liveAnchorTableColumns" :loading="pageLoading" ref="concertTable" border :data="liveAnchorList"></Table>

                            <!-- <transition name="fade">
                            <div class="loading-cover" v-if="pageLoading">
                            <Spin fix size="large"></Spin>
                        </div>
                    </transition> -->
                    <div class="page-ctrl"  v-if="pageCount">
                        <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                        </Page>
                    </div>
                </Card>

            </Col>
            <Col span="6">
                <Card :dis-hover="true">
                    <p slot="title">
                        <Icon type="android-list"></Icon> 直播机构目录
                    </p>
                    <Button slot="extra" type="ghost"  @click="goLiveOrg()">管理</Button>
                        <Tree :data="liveOrgList" ref="liveOrgTree"  @on-select-change="onSelectChange"></Tree>
                </Card>
            </Col>

        </Row>
        <Modal :mask-closable="false" v-model="showModal" :title="selectData ? '编辑':'新增至机构-'+selectOrg.title" :loading="modalLoading" class-name="live-anchor-modal" @on-ok="clickOK()">
            <Form :model="liveAnchorForm" ref="liveAnchorForm" :rules="liveAnchorFormRules" :inline="true">
                <Row :gutter="10">
                    <Col span="6">
                        <header-img-uploader :img-upload-path="postUrl.doUploadAnchorUrl" :upload-img-data="uploadImgData" @on-upload-success="uploadImgSuccess" :show-img-path="uploadImgCallbackPath"></header-img-uploader>
                    </Col>
                    <Col span="18">
                        <Row :gutter="10">
                            <Col span="12">
                                <FormItem label="主播姓名" prop="chinese_name">
                                    <Input v-model="liveAnchorForm.chinese_name" placeholder="请输入主播姓名"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="主播昵称" prop="nickname">
                                    <Input v-model="liveAnchorForm.nickname" placeholder="请输入主播昵称"></Input>
                                </FormItem>
                            </Col>
                            <FormItem label="登录账号" prop="loginid">
                                <Input v-model="liveAnchorForm.loginid" placeholder="输入登录账号"></Input>
                            </FormItem>
                            <FormItem label="手机号" prop="mobilenum">
                                <Input v-model="liveAnchorForm.mobilenum" placeholder="输入手机号"></Input>
                            </FormItem>
                            <Col span="12">
                                <FormItem label="登录密码" prop="password">
                                    <Input v-model="liveAnchorForm.password" placeholder="输入登录密码" type="password"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="确认密码" prop="checkpsw">
                                    <Input v-model="liveAnchorForm.checkpsw" placeholder="请再次输入密码" type="password"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="邮箱" prop="email">
                                    <Input v-model="liveAnchorForm.email" placeholder="输入邮箱"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="主播类型" prop="type">
                                    <Input v-model="liveAnchorForm.type" placeholder="主播类型"></Input>
                                </FormItem>
                            </Col>
                            <Col span="24">
                                <FormItem label="主播简介" prop="intro">
                                    <Input v-model="liveAnchorForm.intro" placeholder="主播简介"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                                </FormItem>
                                <FormItem label="备注" prop="remark">
                                    <Input v-model="liveAnchorForm.remark" placeholder=""  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                                </FormItem>
                            </Col>

                        </Row>

                    </Col>
                </Row>

            </Form>
        </Modal>
    </div>
</template>

<script src="./live-anchor.js">
</script>

<style lang="scss">
.live-anchor-modal {

    .ivu-modal {
        top: 30px;
        .ivu-form-item {
            width: 100%;
            margin: 0 0 24px;
        }
    }
    textarea {
        resize: none;
    }
}
</style>
